<template>
    <view
        class="header"
        :style="{'background': `${background}`}"
    >
        <view :style="{
            'height': `${statusBarHeight}px`
        }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view
            class="nav-black"
            :style="{
            height: `${barHeight}px`,
            width: '100%',
            'line-height': `${barHeight}px`,
            'text-align': 'center'
        }">
            <view class="return_block" @click="onReturn">
                <img class="return_icon" @click="onReturn" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/return_white_icon.png" />
            </view>
            <view class="input_black" :style="{'margin-right': `${capsuleWidth + 10}px`}">
                <img v-show="keywordValue == ''" class="search_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/search_icon.png"/>
                <input
                    @focus.stop="onFouse"
                    @blur.stop="onBlur"
                    class="search_input"
                    placeholder="请输入关键词"
                    v-model="keywordValue"
                    :placeholderStyle="{
                        height: '33rpx',
                        'font-size': '24rpx',
                        'font-family': 'PingFangSC, PingFang SC',
                        'font-weight': 400,
                        'color': '#9B9B9B',
                        'text-align': 'left',
                        'line-height': '33rpx'
                    }"
                />
                <img @click.stop="onClear" v-show="keywordValue != '' && cursor" class="zxyz_min_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/close_icon_black.png"/>
                <view @click.stop="onSearch" v-show="keywordValue != '' && cursor" class="serch_text">搜索</view>
            </view>
        </view>
    </view>
</template>
<script>
var app = getApp()
export default ({
    name: "SearchHeader",
    props: {
        keyword: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            keywordValue: this.keyword,
            cursor: false,
            statusBarHeight: app.globalData.statusBarHeight,
            barHeight: app.globalData.barHeight,
            capsuleWidth: app.globalData.capsuleWidth,
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
        }
    },
    created() {

    },
    methods: {
        onBlur() {
            this.cursor = false
        },
        onFouse() {
            this.cursor = true
        },
        onReturn() {
            uni.navigateBack(1)
        },
        onClear() {
            console.log(11)
            this.keywordValue = ''
            this.$emit('change', this.keywordValue)
        },
        onSearch() {
            this.$emit('change', this.keywordValue)
        }
    }

})
</script>
<style scoped lang="scss">
.header {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: relative;
    .nav-black {
        display: flex;
        align-items: center;
        .return_block {
            width: 60rpx;
            height: 100%;
            display: flex;
            .return_icon {
                width: 30rpx;
                height: 35rpx;
                margin: auto;
            }
        }
        .input_black {
            height: 60rpx;
            width: 100%;
            background: white;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            padding: 0 28rpx;
            box-sizing: border-box;
            flex: 1;
            .search_icon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
            }
            .search_input {
                width: 100%;
                height: 33rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #494949;
                line-height: 33rpx;
                flex: 1;
                text-align: left;
            }
            .serch_text {
                margin-left: 20rpx;
                height: 33rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #5162FD;
                line-height: 33rpx;
            }
        }
    }
}
</style>
